<template>
    <xl-content>
      <div class="content-block">
        <div class="pro-img">
          <img :src="data.pic" alt=""> 
        </div>
        <div class="pro-info" v-if="!inLogistics||inOrderInfo">
          <div class="flex-row" >
            <p>{{data.title}}</p>
            <span v-if="data.goods_prices">￥{{data.goods_prices|toFixed2}}</span>
          </div>
          <template v-if="inOrderInfo">
            <p>数量:{{data.num}}</p>
            <p>下单时间:{{data.time|dateFormat}}</p>
          </template>
          <template v-else>
            <p>数量:{{data.num+data.unit}}</p>
            <p>订单号：{{data.trade_no}}</p>
          </template>
        </div>
        <div class="pro-info" v-if="inLogistics">
          <p>物流状态:<span class="ora"> {{data.state}}</span></p>
          <p>承运快递:{{data.company}}</p>
          <p>快递单号:{{data.logNum}}</p>
        </div>
      </div>
    </xl-content>
</template>

<script>
  import xlContent from '@c/content.vue'
  export default{
    name: 'orderBreviary',
    components:{
      xlContent
    },
    props:{
      data:{
        type:Object
      },
      inOrderInfo:{
        type:Boolean,
        default:false
      },
      inLogistics:{
        type:Boolean,
        default:false
      }
      }
  }
</script>

<style lang="scss" scoped>
@import '../sass/mixin.scss';
  .pro-img{
    img{
      width:128px;
    }
  } 
  .pro-info{
    padding: 0 0 0 5%;
    display: flex;
    flex-flow: column wrap;
    justify-content: space-around;
    flex:2;
    p{
      // margin: 0 0 20px 0;
      &:first-child{
        font-size: 30px; /*px*/
        color:#333;
      }
      &:not(:first-child){
        font-size:26px;/*px*/
        color:#666;
      }
    }
  }
</style>